<template>
  <div class="page cube3">
    <div class="cube">
      <div class="in">
        <div class="front"> front</div>
        <div class="back"> back</div>
        <div class="left"> left</div>
        <div class="right"> right</div>
        <div class="top"> top</div>
        <div class="bottom"> bottom</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {} from "vue";
</script>
<style lang="scss">
.cube3 {
  .cube,
  .cube .in,
  .cube .in > div {
    margin: 0;
    padding: 0;
    height: 200px;
    width: 200px;
    box-sizing: border-box;
  }
  .cube {
    margin: 150px auto;
    transform-style: preserve-3d;
    perspective: 2000px;
    perspective-origin: 50% 500%;
  }
  .cube .in {
    position: relative;
    transform-style: preserve-3d;
    animation: cube3-rotate 4s linear 0s infinite;
    animation-play-state: running;
  }
  .cube .in > div {
    position: absolute;
    transform-style: preserve-3d;
    border: 30px solid transparent;
    background-clip: content-box;
    color: white;
    background-color: rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 140px;
    font-size: 24px;
  }
  .cube .in > div::before,
  .cube .in > div::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .3);
  }
  .cube .in > div::before {
    transform: translate3d(-50%, -50%, 10px) scale(1.2);
    transition: .3s linear;
  }
  .cube:hover .in {
    animation-play-state: paused;
  }
  .cube:hover .in > div::before {
    transform: translate3d(-50%, -50%, 80px) scale(1.5);
  }
  .cube .in > div::after {
    transform: translate3d(-50%, -50%, -10px) scale(.8);
    transition: .3s linear;
  }
  .cube:hover .in > div::after {
    transform: translate3d(-50%, -50%, -50px) scale(.5);
  }
  .cube .front {
    transform: translateZ(100px);
  }
  .cube .back {
    transform: translateZ(-100px) rotateY(180deg);
  }
  .cube .left {
    transform: translateX(-100px) rotateY(-90deg);
  }
  .cube .right {
    transform: translateX(100px) rotateY(90deg);
  }
  .cube .top {
    transform: translateY(-100px) rotateX(90deg);
  }
  .cube .bottom {
    transform: translateY(100px) rotateX(-90deg);
  }
  @keyframes cube3-rotate {
    from {
      transform: rotateY(0deg);
    }
    to {
      transform: rotateY(360deg);
    }
  }
}
</style>